/** @class BlockToggle 
	@description gere un systeme de bloc ouvert/ferme
	@use 
		@return behavior 
*/
var BlockDock = new Class({
	required: ["css", "img"],
		
	initialize: function (block, options){
		block = this.block = $(block);
		this.inst = new Dock(block, options)
		//Moodulz.addEvent("onLayoutChanged", this.inst.positionate);
	}
		
});

new Moodule(
	"ul.dock", 
	
	BlockDock,
	
	{
		bDefer : false,
		aArgs: [
			{
				minHeight: 32,
				maxHeight:64,
				snap: 128,
				onOpenComplete: function (oItem){
					if(!oItem.subNav) return;
					oItem.subNav.refresh(1);
				},
				onRefresh: function (oItem){
					if(!oItem.subNav) return;
					oItem.subNav.refresh(oItem.pourcent);
				},
				onCloseComplete: function (oItem){
					if(!oItem.subNav) return;
					oItem.subNav.refresh(0);
				},
				onItemInstanciate: function (oItem){
					if(oItem.item.getElement('ul')){
						oItem.subNav = new DockSubNavigation(oItem);
					}
					// //console.dir(oItem.item);
					// //console.log("--- --- --- ---");
				},
				onItemOver: function (oItem){
				}
			}
		], 
		fTest: $lambda(true),
		classId: "BlockToggle",
		checkCapabilities: ["css"],
		injectCSS: {
			".toggleHandler": "color:red;"
		
		}
	});

/**
* 
* 
 **/

	

var Dock = new Class({
	Implements: [Options,Events],
		
	options: {
		minHeight: 50,
		maxHeight:100,
		snap: 150,
		onOpenComplete: $empty,
		onRefresh: $empty,
		onCloseComplete: $empty,
		onItemInstanciate: $empty,
		onItemOver: $empty,
		onItemOut: $empty,
		onItemClick: $empty,
		onItemDblClick: $empty,
		onItemFocus: $empty,
		onItemBlur: $empty
	},
    
	initialize: function (elm, options){
		this.setOptions(options);
		this.elm = $(elm);
		// this.elm.setStyle("height", this.options.maxHeight)
		// this.elm.setStyle("line-height", this.options.maxHeight)
		this.elm.addEvents({
			"mousemove": function (e){
				this.fireEvent("onDockMove", e)
			}.bind(this),
			"mouseleave": function (e){
				this.fireEvent("onDockOut");
			}.bind(this),
			"mouseenter": function (e){
				this.fireEvent("onDockIn");
			}.bind(this)
		})
		
		/* */
		this.items = [];
		this.elm.getChildren("li").each(function (el, i){
			this.items.push(new DockItem(el, this, {min:this.options.minHeight, max:this.options.maxHeight, snap:this.options.snap}));
		}.bind(this))
    }
})

var DockItem = new Class({
	initialize: function (li, oSuper, opts){
		this.item = $(li);
		this.a = this.item.getElement("a");
		if(!this.a) return;
		this.item.addClass("dockItem");
		this.oSuper = oSuper;
		
		this.oSuper.addEvents({
			"onDockMove":
				function(e){
					this.refresh(e.page.x);
				}.bind(this),
			"onDockIn":
				function(e){
					if(this.interval) clearInterval(this.interval);
					
				}.bind(this),
			"onDockOut":
				function(e){
					this.minimize();
				}.bind(this)
		});
		
		
		this.item.getElement("a").addEvents({
			"focus": function (){
				this.maximize();
				this.oSuper.fireEvent("onItemOver", this);
			}.bind(this),
			"blur": function (){
				this.minimize();
			}.bind(this)
		});
		
		this.img = this.item.getElement("img");
		this.options = opts;
		this.cardinals = this.item.getCoordinates();
		this.resize(0);
		this.oSuper.fireEvent("onItemInstanciate", this);
	},
	
	refresh: function (mouseX){
		this.cardinals = this.item.getCoordinates();
		switch(true){
			case this.cardinals.left-this.options.snap > mouseX:
				var pc = 0;
				this.oSuper.fireEvent("onCloseComplete", this);
				break;
			case this.cardinals.left > mouseX:
				var delta = this.cardinals.left - mouseX;
				var pc = Math.abs(delta - this.options.snap)/this.options.snap;
				this.oSuper.fireEvent("onRefresh", this);
				break;
			case this.cardinals.right+this.options.snap < mouseX:
				var pc = 0;
				this.oSuper.fireEvent("onCloseComplete", this);
				break;
			case this.cardinals.right < mouseX:
				var delta = mouseX - this.cardinals.right;
				var pc = Math.abs(delta - this.options.snap)/this.options.snap;
				this.oSuper.fireEvent("onRefresh", this);
				break;
			default:
				this.oSuper.fireEvent("onItemOver", this);
				var pc = 1;
		}
		this.resize(pc);
	},
		
	resize: function (pc){
		this.pourcent = pc;
		this.img.setStyle("height", this.options.min +( pc * (this.options.max - this.options.min)));
	},
	
	minimize: function (){
		
		if(this.anim) this.anim.cancel();
		this.anim = new Fx.Tween(this.img, {
			duration: "short",
			onComplete: function (){
				this.oSuper.fireEvent("onCloseComplete", this);
			}.bind(this)
		
		}).start("height", this.options.min);
	},
	maximize: function (){
		if(this.anim) this.anim.cancel();
		this.anim = new Fx.Tween(this.img, {
			onComplete: function (){
				this.oSuper.fireEvent("onOpenComplete", this);
			}.bind(this)
		
		}).start("height", this.options.max);
	
	}
})

var DockSubNavigation = new Class({
	initialize: function (oItem){
		console.log(oItem)
		this.li = oItem.item;
		this.elm = this.li.getElement("ul");
		if(!this.elm) return;
		this.elm.set("opacity", 0)
	},
	
	show: function (pourcent){
		this.elm.removeClass("hidden")
	},
	hide: function (pourcent){
		this.elm.addClass("hidden")
	},
	refresh: function (pourcent){
		this.elm.set("opacity", pourcent)
	}
})